<template>
	<view class="addaddress">
		<view class="item">
			<input type="text" placeholder="姓名" v-model="address.toName">
		</view>
		<view class="item">
			<input type="text" placeholder="手机号码" v-model="address.contactNumber">
		</view>
		<view class="item" @click="showMulLinkageThreePicker">
			<!-- <picker mode="region" @change="bindRegionChange" :value="address.region" :custom-item="customItem">
				<input type="text" placeholder="省市区选择器" v-model="address.address">
			</picker> -->
			<view>{{address.pickText}}</view>
		</view>
		<!-- <view class="section">
      <view class="section__title">省市区选择器</view>
      <picker mode="region" @change="bindRegionChange" :value="region" :custom-item="customItem">
        <view class="picker">
          当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
        </view>
      </picker>
    </view> -->
		<view class="item">
			<input type="text" placeholder="详细地址，如楼道、楼盘号等" v-model="address.address1">
		</view>
		<view class="item itemend">
			<checkbox-group @change="checkboxChange">
				<label class="checkbox">
					<checkbox class="box" value="true" :checked="address.checked" color="#B4282D" />设置为默认地址
				</label>
			</checkbox-group>
			<!-- <view @click="wxaddress">一键导入微信></div>
			</view> -->
			<view @click="saveAddress" class="bottom">
				保存
			</view>
		</view>
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
		@onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
		</view>
</template>

<script>
	import { mapState, mapGetters } from 'vuex'
		// import {getAddress,addAddress,updateAddress} from '@/api/ucenter/index';
		import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
		import cityData from '@/common/city.data.js';
		import {
			setStore,
		} from '@/common/util';
		
		import {getFirstInfo} from '@/common/cityUtils'
	export default {
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				region: [],
				customItem: "全部",
				id: "",
				typeId: "",
				openId: "",
				themeColor: '#007AFF',
				cityPickerValueDefault: [0, 0, 1],
				oldchecked: false,
				address: {
					contactListId: "",
					toName: "",
					contactNumber: "",
					pickText: "省市去选择器",
					address1: "",
					checked: false
				},

			};
		},
		onLoad: function(e) {
			console.log("contactId:"+e.id)
			this.typeId = e.typeId;
			if(e.id !== "0") {
				this.get(e.id)
			}
		},
		computed: {
			...mapState({
				addresses: state => state.address.addresses,
			}),
			...mapGetters(
				[ "userId"]
			),
		},
		
		methods: {
			onConfirm(e) {
				this.address.pickText = JSON.stringify(e)
			},
			onCancel(e) {
				console.log(e);
			},
			get(id) {
				this.addresses.forEach(item => {
					if(item.contactListId == id) {
						this.address = item;
						this.oldchecked = item.checked;
					}
				})
			},
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			getDetail: function() {},
			checkboxChange: function(e) {
				this.address.checked = e.mp.detail.value[0];
			},
			saveAddress: function() {
				
				if(this.addresses.contactListId == "") {
					if(this.checked == true) {
						var item = this.addresses.find(p => p.checked == true);
						var i = this.addresses.findIndex(p => p.checked == true);
						if(item == null ) {
							this.addAddress();
						}  else {
							item.checked = false;
							var updateI = {
								addressItem:item,
								index: i,
								key: "checked"
							};
							console.log("updateI"+ JSON.stringify(updateI))
							this.$store.dispatch("updateAddressAction", updateI).then(response => {
								this.addAddress();
							}).catch(p => {
									uni.showToast({
										title: "更新收货地址失败，请重试。"
									});
							});
						}
					} else {
						this.addAddress();
					}
					
				} else {
					if(this.oldChecked == false && this.address.checked == true) {
						
						var item = this.addresses.find(p => p.checked == true);
						var i = this.addresses.findIndex(p => p.checked == true);
						if(item == null ) {
							 this.updateCurrentItem();
						}  else {
							item.checked = false;
							var updateI = {
								addressItem:item,
								index: i,
								key: "checked"
							};
							console.log("updateI"+ JSON.stringify(updateI))
							this.$store.dispatch("updateAddressAction", updateI).then(response => {
								this.updateCurrentItem();
							}).catch(p => {
									uni.showToast({
										title: "更新收货地址失败，请重试。"
									});
							});
						}
					} else {
						this.updateCurrentItem();
					}
					
					
				}
			}, 
			
			updateCurrentItem() {
					var index1 = this.addresses.findIndex(p => p.contactListId == this.address.contactListId);
					console.log(this.address)
					this.address.address = this.address.pickText + this.address.address1
					this.$store.dispatch("updateAddressAction", {
					addressItem:this.address,
					index:index1,
					key: "checked",
				}).then(res => {
						uni.showModal({
							title:"提示",
							content: "更新收货地址成功"
						})
					}).catch(p => {
						uni.showModal({
							title:"提示",
							content: "更新收货地址失败"
						})
			})
			},
			addAddress() {
				this.address.address = this.address.pickText + this.address.address1
				this.$store.dispatch("addAddressAction", this.address).then(res => {
					uni.showToast({
						title:"新增地址成功"
					})
					
					if(this.typeId == 1) {
						setStore({
							name: "$sc_address_id",
							content: event.mp.currentTarget.dataset.addressId,
							type: 'session'
						})
						uni.redirectTo({
							url: 'pages/buy/checkout'
						})
					} else {
						uni.navigateBack()
					}
					
				}
				)
			}

		}

	}
</script>

<style>
	.addaddress {
		position: absolute;
		width: 100%;
		height: 100%;
		background: #fff;
	}

	.addaddress .item {
		width: 690rpx;
		height: 70rpx;
		line-height: 70rpx;
		margin: 0 auto;
		padding: 10rpx 0;
		border-bottom: 1rpx solid #f4f4f4;
	}

	.addaddress .item input {
		width: 100%;
		height: 100%;
	}

	.addaddress .itemend {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;
		border: none;
	}

	.addaddress .itemend view:nth-child(2) {
		color: green;
	}

	.addaddress .bottom {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
		background: #B4282D;
		color: #fff;
		font-size: 32rpx;
	}
</style>
